<template>
    <div class="slide-fullpage">
    <div class="banner-wrapper">
      <div class="slide-banner-wrapper" ref="slide">
        <div class="slide-banner-content">
          <div class="slide-page" v-for="index in nums" :key="index">
               <div  :class="`scrollWarp page${index}`">
                 <div class="scrollWarp-content">
                     <slot :name="`tab${index}`">

                     </slot>
                   </div>
               </div>
               <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
    
</template>
<script>
const page={};
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
  BScroll.use(Slide)
  export default {
    props:{
      value:{
        type:[Number,String],
        default:0,
      },
      pageNum:{
        type:Number,
        default:2
      }
    },
    data() {
      return {
        nums: this.pageNum,
        currentPageIndex: this.value,
     
      }
    },
    mounted() {
       document.addEventListener("showPage", async ()=>{
         this.$nextTick(()=>{
           this.userFlag=res.data;
         });  
       });
    },
    beforeDestroy() {
      this.slide.destroy()
    },
    methods: {
      
      disable(index){
          page["page"+index]?.disable();
         
      },
      enable(index){
             page["page"+index]?.enable();
         
            this.$nextTick(()=>{
              
              page["page"+index]?.refresh();
            })
      },
      refresh(index){
        
        this.$nextTick(()=>{
           page["page"+index]?.refresh();
        })
         
      },
      finishPullUp(index){
          page[`page${index}`]&&(page[`page${index}`].finish=true);
         
         this.$nextTick(()=>{
          
           page["page"+index]?.refresh();
        })
      },
      init() {
        var _that =this;
        /**初始化数据加载组件 */
        for (let index = 0; index < this.pageNum; index++) {
            console.log(index,"数据值");
            page[`page${index+1}`]&&page[`page${index+1}`].off('scroll')
            page[`page${index+1}`] = new BScroll(`.page${index+1}`,{
                scrollY: true,
                scrollX: false,
                flickLimitDistance:60,
                flickLimitTime:100,
                click:true,
                bounceTime:300,
                probeType:3,
                bounce:{
                  left:false,
                  right:false
                  }
                }).on("scroll",(pos)=>{
                      // if(pos.y>100){
                      //     //下拉刷新逻辑
                      //      page[`page${index+1}`].scroller.scrollBehaviorY.minScrollPos = 40;
                      //      setTimeout(()=>{
                      //         page[`page${index+1}`].scrollTo(0,0,300);
                      //      },4000)
                      // }

                      // console.log(page[`page${index+1}`].maxScrollY>=pos.y,page[`page${index+1}`].finish)
                      if(page[`page${index+1}`].maxScrollY>=pos.y&&page[`page${index+1}`].finish){
                         page[`page${index+1}`].finish=false;
                         page[`page${index+1}`].scroller.scrollBehaviorY.maxScrollPos-=41;
                         page[`page${index+1}`].scroller.scrollBehaviorY.setMovingDirection(-1);
                         this.$emit("load",index+1);   
                      }
                });
                page[`page${index+1}`].finish=true;
        }
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,
          scrollY: false,
          slide: {
            threshold: 100,
            loop: false,
            autoplay: false,
            listenFlick: true,
            startPageXIndex:_that.currentPageIndex
          },
          useTransition: false,
          momentum: true,
          bounce: true,
          stopPropagation: true,
          probeType: 2
        })
        this.slide.on('slideWillChange', this._onScrollEnd)
      },
      nextPage() {
        this.slide.next()
      },
      prePage() {
        this.slide.prev()
      },
      gotoPage(){
         console.log(this.currentPageIndex);
         this.slide.goToPage(this.currentPageIndex,0)
      },
      _onScrollEnd(page) {
       
        let pageIndex = page.pageX;
        this.currentPageIndex = pageIndex;
        this.$emit("input",this.currentPageIndex)
      }
    },
    watch:{
      "value":function(newData,oldData){
          if(newData!==oldData){
             this.currentPageIndex=newData;
             this.gotoPage();
          }
      },
      "pageNum":function(newval,old){
        this.nums = newval
        // console.log("变化了",this.nums)
        setTimeout(()=>{
          this.init();
        },60)
         
      }
    }
  }
</script>
<style lang="less" scoped>
 @import url("./style.less");
 
 .scrollWarp{
   height:100%;
   width:100%;

 }
 .scrollWarp-content{
    transform: translate3d(0,0,0);
    backface-visibility:hidden;
    perspective:  1000 ;
    // width:100%;
    // height:100%;
    // float:left;
    // min-height:calc(~"100% + 1px");
 }
</style>